import React from "react";
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Tag, Input, Button, Row, Col, Tabs} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import Utils from "../../common/Utils";
import "../../assets/css/users/users.less";

const URL = {
    list: 'adm/apply/list',
    key: 'applyId',
    update: 'adm/apply/process',
    first: '订单管理',
    second: "预约订单",
};

const Search = Input.Search;

export default class Applys extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: [],
            remarkVisible: false,
            remark: '',
            pagination: {pageSize: 10, current: U.page.getCurrentPage(), total: 0},
            columns: [
                {
                    title: "预约编号",
                    dataIndex: "applyNum",
                    key: "applyNum",
                },
                {
                    title: "姓名",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "城市",
                    dataIndex: "city",
                    key: "city"
                },
                {
                    title: "联系电话",
                    dataIndex: "mobile",
                    key: "mobile",
                },
                {
                    title: "销售员",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "状态",
                    dataIndex: "state",
                    key: "state",
                    render: (state) => {
                        switch (state) {
                            case 1:
                                return <Tag color="#ff1200">待分配</Tag>;
                            case 2:
                                return <Tag color="#4a4a4a">已分配</Tag>;
                            case 3:
                                return <Tag color="#4a4a4a">已签约</Tag>;
                            case 4:
                                return <Tag color="#9a9a9a">已取消</Tag>;
                        }
                    }
                }, {
                    title: "下单时间",
                    dataIndex: "createdAt",
                    key: "createdAt",
                    render: (createdAt) => <span>{U.date.format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}</span>
                },
                {
                    title: "操作",
                    dataIndex: "option",
                    key: "option",
                    width: 200,
                    render: (col, record, i) => (
                        <Dropdown overlay={<Menu>
                            <Menu.Item key="0">
                                <a onClick={() => this.allotSell(record)}> 分配销售 </a>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <a onClick={() => this.cancel(record)}> 取消预约 </a>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <a onClick={() => this.Detail(event)}> 查看详情 </a>
                            </Menu.Item>
                        </Menu>} trigger={['click']}>
                            <a className="ant-dropdown-link" href="javascript:;">
                                操作<Icon type="down"/>
                            </a>
                        </Dropdown>
                    )
                }
            ]
        };
    }


    componentDidMount() {
        this.loadData();
    }


    loadData = () => {
        let _this = this;
        _this.setState({loading: true});
        let p = _this.state.pagination;
        App.api(URL.list, {
            countTotal: true,
            offset: (this.state.pagination.current - 1) * (this.state.pagination.pageSize),
            limit: p.pageSize
        }).then(function (result) {
            let pager = U.pager.convertOffset2Page(result);
            pager.current = p.current;
            _this.setState({
                dataSource: result.items,
                pagination: pager,
                loading: false
            });
        });
    };

    // tab切换
    TabClick = (key) => {
        this.setState({
            pagination:{

            }
        },()=>this.loadData())
    }

    handleTableChange = (pagination) => {
        this.setState({
            pagination: pagination
        }, () => this.loadData());
    };

    // 分配销售
    allotSell = (user) => {
        Utils.user.reallot2(user, this.realloter);
    }

    // 分配销售的回调
    realloter = (user, newDate) => {
        let {dataSource} = {...this.state};
        // dataSource[user.index].expiryDate = newDate; // 前台提前更改
        this.setState({dataSource});
    }

    // 取消预约
    cancel = () => {
        let url_api = 'xxx/xxx';
        App.api(url_api, {
            // 入参
        }).then((result) => {
            // 
            this.loadData()
        });
    }

    // 查看详情
    Detail = (e) => {
        e.preventDefault(); 
        // 跳转到查看详情
        // let history = this.context.router.history
        // history.push('/manage');  
    }

    render() {
        const {columns, dataSource, pagination:{total, pageSize, offset, current}} = this.state;
        const TabPane = Tabs.TabPane;
        const pagination = {
            total: total,
            current,
            pageSize: pageSize,
            showSizeChanger: true
        };
        return (
            <div>
                <BreadcrumbCustom first={URL.first} second={URL.second}/>
                <Card>
                    <div>
                    <Search
                        placeholder="请输入客户姓名或电话搜索"
                        onSearch={value => console.log(value)}
                        style={{ width: '261px', height:'30px' }}
                        />
                        <br /><br />
                    </div>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="全部" key="1" onTabClick={()=>this.TabClick(1)}></TabPane>
                        <TabPane tab="待分配" key="2" onTabClick={()=>this.TabClick(2)}></TabPane>
                        <TabPane tab="已分配" key="3" onTabClick={()=>this.TabClick(3)}></TabPane>
                        <TabPane tab="已签约" key="4" onTabClick={()=>this.TabClick(4)}></TabPane>
                        <TabPane tab="已取消" key="5" onTabClick={()=>this.TabClick(5)}></TabPane>                        
                    </Tabs>
                    <Modal
                        title={'修改备注'}
                        onCancel={() => {
                            this.setState({
                                remark: '',
                                id: null,
                                remarkVisible: false,
                            })
                        }}
                        onOk={() => {
                            App.api('adm/apply/note', {
                                [URL.key]: this.state.id,
                                notes: this.state.remark,
                            }).then(() => {
                                message.success('添加备注成功');
                                this.setState({
                                    remark: '',
                                    remarkVisible: false,
                                })
                            })
                        }}
                        visible={this.state.remarkVisible}>
                        <Input
                            placeholder="输入备注"
                            value={this.state.remark}
                            onChange={(e) => {
                                this.setState({
                                    remark: e.target.value,
                                })
                            }}/>
                    </Modal>
                    <Table
                        rowKey={row => row.id}
                        columns={columns}
                        dataSource={dataSource}
                        pagination={pagination}
                        onChange={this.handleTableChange}
                        loading={this.state.loading}
                        scroll={{
                            x: columns
                                .map(({width}) => width || 100)
                                .reduce((l, f) => l + f)
                        }}
                    />
                </Card>
            </div>
        );
    }
}
